
<link rel="stylesheet" type="text/css" href="<?php

echo $base_url . 'content/css/manager.css'

?>" />

<script>
    
    function onClickTopic(o){
        $(".topics li").attr("class","");
        $(o).toggleClass('selected');
        var selectedId=$('#manager .topics ul li.selected').attr("id");
        getWords(selectedId);
        $(".topic_id").attr("value",selectedId);
    }
    
    function onClickWord(o){
        $(".words li").attr("class","");
        $(o).toggleClass('selected');
    }
    
    function _deleteTopic(data){
        if(data=='1'){
            $('#manager .topics ul li.selected').remove();
            alert('Sucessful');
        }
        else{
            alert(data);
        }
    }
    
    function _deleteWord(data){
        if(data=='1'){
            $('#manager .words ul li.selected').remove();
            alert('Sucessful');
        }
        else{
            alert(data);
        }
    }
    
    function get_topic_selected(){
        return '1';
    }
        
    function onDeleteTopic(){
        var selectedId=$('#manager .topics ul li.selected').attr("id");
        if(confirm("Do you want to remove?")){
            core_getdata(_deleteTopic,'<?php echo $base_url.'/index.php/manager/delete_topic/' ?>' + selectedId);
        }
       
    }
    
    function onDeleteWord(){
        var selectedId=$('#manager .words ul li.selected').attr("id");
        if(confirm("Do you want to remove?")){
            core_getdata(_deleteWord,'<?php echo $base_url.'/index.php/manager/delete_word/' ?>' + selectedId);
        }
       
    }
    
    function close_box(){
        $(".box").hide();
    }
    
    function open_new_topic(){
        $(".edit-new-topic").show();
        $(".edit-new-topic .id").attr("value",'-1');
        $(".edit-new-topic .name").attr("value",'');
        $(".edit-new-topic .description").attr("value",'');
        $(".edit-new-topic .image").attr("value",'');
    }
    
    function open_new_word(){
        $(".edit-new-word").show();
        $(".edit-new-word .id").attr("value",'-1');
        $(".edit-new-word .name").attr("value",'');
        $(".edit-new-word .description").attr("value",'');
        $(".edit-new-word .image").attr("value",'');
    }
    
    function open_edit_topic(){
        $(".edit-new-topic").show();
        //init data
        id=$('#manager .topics ul li.selected').attr("id");
        name=$('#manager .topics ul li.selected .topic-title').html();
        description=$('#manager .topics ul li.selected .topic-des').html();
        image=$('#manager .topics ul li.selected img').attr("src");
        //alert(id+name+description+image);
        $(".edit-new-topic .id").attr("value",id);
        $(".edit-new-topic .name").attr("value",name);
        $(".edit-new-topic .description").attr("value",description);
        $(".edit-new-topic .image").attr("value",image);
    }
    
    function open_edit_word(){
        $(".edit-new-word").show();
        //init data
        id=$('#manager .words ul li.selected').attr("id");
        name=$('#manager .words ul li.selected .topic-title').html();
        description=$('#manager .words ul li.selected .topic-des').html();
        image=$('#manager .words ul li.selected img').attr("src");
        //alert(id+name+description+image);
        $(".edit-new-word .id").attr("value",id);
        $(".edit-new-word .name").attr("value",name);
        $(".edit-new-word .description").attr("value",description);
        $(".edit-new-word .image").attr("value",image);
    }
    
    function _create_topic(data){
        if(data>0){
            name=$(".edit-new-topic .name").attr("value");
            description=$(".edit-new-topic .description").attr("value");
            image=$(".edit-new-topic .image").attr("value");
            
            
            li=$("<li>").attr('id',data).appendTo($(".topics ul"));
            li.click(function(){
                
                onClickTopic(this);
                
            });
            div=$("<div>").attr("class","topic-image").appendTo(li);
            img=$("<img>").attr("src",image).appendTo(div);
            div=$("<div>").attr("class","topic-info").appendTo(li);
            $("<div>").attr("class","topic-title").html(name).appendTo(div);
            $("<div>").attr("class","topic-des").html(description).appendTo(div);
            close_box();
        }
        else{
            alert(data);
        }
    }
    
    function _create_word(data){
        if(data>0){
            name=$(".edit-new-word .name").attr("value");
            description=$(".edit-new-word .description").attr("value");
            image=$(".edit-new-word .image").attr("value");
            
            
            li=$("<li>").attr('id',data).appendTo($(".words ul"));
            li.click(function(){
                
                onClickWord(this);
                
            });
            div=$("<div>").attr("class","topic-image").appendTo(li);
            img=$("<img>").attr("src",image).appendTo(div);
            div=$("<div>").attr("class","topic-info").appendTo(li);
            $("<div>").attr("class","topic-title").html(name).appendTo(div);
            $("<div>").attr("class","topic-des").html(description).appendTo(div);
            close_box();
        }
        else{
            alert(data);
        }
    }
    
    function _edit_topic(data){
        if(data=='1'){
            name=$(".edit-new-topic .name").attr("value");
            description=$(".edit-new-topic .description").attr("value");
            image=$(".edit-new-topic .image").attr("value");
            
            
            $(".topics .selected .topic-image img").attr("src",image);
            $(".topics .selected .topic-info .topic-title").html(name);
            $(".topics .selected .topic-info .topic-des").html(description);
            close_box();
        }
        else{
            alert(data);
        }
    }
    
    function _edit_word(data){
        if(data=='1'){
            name=$(".edit-new-word .name").attr("value");
            description=$(".edit-new-word .description").attr("value");
            image=$(".edit-new-word .image").attr("value");
            
            
            $(".words .selected .topic-image img").attr("src",image);
            $(".words .selected .topic-info .topic-title").html(name);
            $(".words .selected .topic-info .topic-des").html(description);
            close_box();
        }
        else{
            alert(data);
        }
    }
    
    function onCreateTopic(){
        name=$(".edit-new-topic .name").attr("value");
        id=$(".edit-new-topic .id").attr("value");
        description=$(".edit-new-topic .description").attr("value");
        image=$(".edit-new-topic .image").attr("value");
        //alert(name+description+image);
        if(id>0)
            core_postdata(_edit_topic,'<?php echo $base_url.'index.php/manager/insert_topic'?>',"id="+id+"&name="+name+"&description="+description+"&image="+image);
        else
            core_postdata(_create_topic,'<?php echo $base_url.'index.php/manager/insert_topic'?>',"id="+id+"&name="+name+"&description="+description+"&image="+image);
    }
    
    function onCreateWord(){
        name=$(".edit-new-word .name").attr("value");
        id=$(".edit-new-word .id").attr("value");
        description=$(".edit-new-word .description").attr("value");
        image=$(".edit-new-word .image").attr("value");
        topic_id=$(".edit-new-word .topic_id").attr("value");
        //alert(name+description+image);
        if(id>0)
            core_postdata(_edit_word,'<?php echo $base_url.'index.php/manager/insert_word'?>',"id="+id+"&name="+name+"&description="+description+"&image="+image+"&topic_id="+topic_id);
        else
            core_postdata(_create_word,'<?php echo $base_url.'index.php/manager/insert_word'?>',"id="+id+"&name="+name+"&description="+description+"&image="+image+"&topic_id="+topic_id);
    }
    
    
    function getWords(topic_id){
        core_getdata(_loadWords,'<?php echo $base_url.'index.php/manager/get_word/'?>'+topic_id);
    }
    
    function _loadWords(data){
        $(".words ul li").remove();
        for(i=0;i<data.length;i++){
            //alert(data[i].key);
            
            li=$("<li>").attr('id',data[i].id).appendTo($(".words ul"));
            li.click(function(){
                
                onClickWord(this);
                
            });
            div=$("<div>").attr("class","topic-image").appendTo(li);
            img=$("<img>").attr("src",data[i].image).appendTo(div);
            div=$("<div>").attr("class","topic-info").appendTo(li);
            $("<div>").attr("class","topic-title").html(data[i].key).appendTo(div);
            $("<div>").attr("class","topic-des").html(data[i].value).appendTo(div);
        }
    }
    
    function play(){
        id=$('#manager .topics ul li.selected').attr("id");
        if(id>0)
            window.location.href='/vocplay/index.php/games/index/'+id;
        else
            alert("You have choose a topic");
    }
    
</script>

<div class="box edit-new-topic">
    <div class="box-head">
        <div class="box-title">Create Topic</div>
        <div class="box-close" onclick="close_box()">x</div>
    </div>
    <div class="box-content">
            <input type="hidden" class="id" value="-1">
            <table>
                <tr>
                    <td>Topic Name</td>
                    <td><input class="textbox name" ></td>
                </tr>
                <tr>
                    <td>Topic Description</td>
                    <td><input class="textbox description" ></td>
                </tr>
                <tr>
                    <td>Topic Image</td>
                    <td><input  class="textbox image" ></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="Submit" onclick="onCreateTopic()"/>
                    </td>
                </tr>
            </table>
    </div>
</div>

<div class="box edit-new-word">
    <div class="box-head">
        <div class="box-title">Create Word</div>
        <div class="box-close" onclick="close_box()">x</div>
    </div>
    <div class="box-content">
            <input type="hidden" class="id" value="-1">
            <input type="hidden" class="topic_id" value="-1">
            <table>
                <tr>
                    <td>Topic Name</td>
                    <td><input class="textbox name" ></td>
                </tr>
                <tr>
                    <td>Topic Description</td>
                    <td><input class="textbox description" ></td>
                </tr>
                <tr>
                    <td>Topic Image</td>
                    <td><input  class="textbox image" ></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="Submit" onclick="onCreateWord()"/>
                    </td>
                </tr>
            </table>
    </div>
</div>



    <div id="manager" >
        <div class="combobox topics">
            <p class="pleft">Topics</p>
            <div class="option">
                <div class="new" onclick="play()">
                    <img src="<?php echo $base_url.'content/images/options/play.png'?>"/>
                </div>
                <div class="new" onclick="open_new_topic()">
                    <img src="<?php echo $base_url.'content/images/options/add.png'?>"/>
                </div>
                <div class="edit" onclick="open_edit_topic()">
                    <img src="<?php echo $base_url.'content/images/options/edit.png'?>"/>
                </div>
                <div class="delete" onclick="onDeleteTopic()">
                    <img src="<?php echo $base_url.'content/images/options/delete.png'?>"/>
                </div>
            </div>
            <div class="br"></div>
            <ul>
                
                <?php 
                foreach($topics as $topic){
                    ?>
                    <li id="<?php echo $topic->id; ?>" onclick="onClickTopic(this)">
                        <div class="topic-image">
                            <img src="<?php echo $topic->image; ?>"/>
                        </div>
                        <div class="topic-info">
                            <div class="topic-title"><?php echo $topic->name; ?></div>
                            <div class="topic-des"><?php echo $topic->description; ?></div>
                        </div>
                    </li>
                    <?php
                }
                
                ?>
            </ul>
        </div>
        <div class="combobox words">
            <p class="pleft">Words</p>
            <div class="option">
                <div class="new" onclick="open_new_word()">
                    <img src="<?php echo $base_url.'content/images/options/add.png'?>"/>
                </div>
                <div class="edit" onclick="open_edit_word()">
                    <img src="<?php echo $base_url.'content/images/options/edit.png'?>"/>
                </div>
                <div class="delete" onclick="onDeleteWord()">
                    <img src="<?php echo $base_url.'content/images/options/delete.png'?>"/>
                </div>
            </div>
            <div class="br"></div>
            <ul>
                 
            </ul>
        </div>
    </div>
